<template>
  <div id="index">
    <!--    轮播图-->
    <div class="swiperbox">
      <el-carousel :name="swiper" direction="vertical" :autoplay="true">
        <el-carousel-item v-for="(item, i) in slideList" :key="i">
          <img :src="item.image" alt="swiper" class="swiper">
          <div class="swiper-mask">
            <div class="sm-tit">STREET CULTURE X-SPORTS</div>
            <div class="sm-text">即使世态无常 也要纵容梦想</div>
            <div class="sm-eng">Lorem ipsum dolor sit amet, consectetur adipiscing elitMassa<br /> eu praesent a sit
              mi nisl tinciduntconsequat.<br /> facilisis semper neque
            </div>
            <div class="sm-input">
              <el-input v-model="inputvalue" class="sm-inputson" placeholder="Enter your information" :style="{ border: 'none' }"></el-input>
              <button class="sm-but">Sign up now</button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
    </div>

    <!--    管理后台-->
    <div class="dminbox">
      <div class="dmin">
        <div class="dmintop">
          <div class="lookmore">
            <img src="http://competition.duoyu021.top/index/right3.png" alt="right">
            <div class="lookmoretit">
              <NuxtLink to="/404">查看更多</NuxtLink>
            </div>
          </div>
          <div class="dminA">
            <img src="http://competition.duoyu021.top/index/admin.png" alt="admin">
          </div>
        </div>
        <div class="dmincent">
          <div class="dminson" v-for="(item, i) in dminlist" :key="i">
            <img :src="item.image" alt="数据">
            <div class="dminbot">
              <div class="dmintit">{{ item.title }}</div>
              <div class="dmintext">
                {{ item.content }}
              </div>
              <div class="butbox">
                <button class="dminbut" @click="tomore(i)">MORE</button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!--    tel管理后台-->
    <div class="teladmin">
      <div class="hotstit">
        <div class="tit-eng">ADMIN BACKGROUND</div>
        <div class="tit-p">管理后台</div>
      </div>
      <el-carousel :name="teladmin" height="460px" style="width: 90%;margin: auto;">
        <el-carousel-item v-for="(item, i) in dminlist" :key="i">
          <img :src="item.image" alt="数据" class="adminimg">
          <div class="dminbot">
            <div class="dmintit">{{ item.title }}</div>
            <div class="dmintext">
              {{ item.content }}
            </div>
            <div class="butbox">
              <button class="dminbut" @click="tomore(i)">MORE</button>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>
      <div class="lookmore2">
        <img src="http://competition.duoyu021.top/index/right3.png" alt="right">
        <div class="lookmoretit">
          <NuxtLink to="/404">查看更多</NuxtLink>
        </div>
      </div>
    </div>
    <!--    活动报名-->
    <div class="ventbox">
      <div class="hotstit">
        <div class="tit-eng">ADMIN BACKGROUND</div>
        <div class="tit-p">活动报名</div>
      </div>
      <div class="vent">
        <div class="dmintop">
          <div class="dminA">
            <img src="http://competition.duoyu021.top/index/event.png" alt="admin">
          </div>
          <div class="lookmore">
            <img src="http://competition.duoyu021.top/index/right3.png" alt="right">
            <div class="lookmoretit">
              <NuxtLink to="/404">查看更多</NuxtLink>
            </div>
          </div>
        </div>
        <div class="ventcent">
          <div class="ventitem" ref="animatedBoxes" v-for="(item, i) in ventlist" :key="i">
            <img :src="item.image" alt="报名1" class="apply">
            <div class="vi-left">
              <div class="vl-top">
                <div class="vltit">{{ item.title }}</div>
                <img src="http://competition.duoyu021.top/index/line.png" alt="line" class="line">
              </div>
              <div class="vltext">
                {{ item.content }}
              </div>
              <div class="okvent">
                <div class="okleft">
                  <img src="http://competition.duoyu021.top/index/group.png" alt="组">
                  <div class="oktit">已报名{{ item.numbers }}人</div>
                </div>
                <div class="okright">
                  <img src="http://competition.duoyu021.top/index/txgroup.png" alt="头像">
                </div>
              </div>
              <button class="ventbut">立即报名</button>
            </div>
          </div>
        </div>
      </div>
      <div class="lookmore2">
        <img src="http://competition.duoyu021.top/index/right3.png" alt="right">
        <div class="lookmoretit">
          <NuxtLink to="/404">查看更多</NuxtLink>
        </div>
      </div>
    </div>

    <!--    赛事大屏-->
    <div class="screenbox animate__animated " ref="screenbox">
      <div class="hotstit">
        <div class="tit-eng">ADMIN BACKGROUND</div>
        <div class="tit-p">赛事大屏</div>
      </div>
      <div class="screen">
        <div class="dmintop">
          <div class="lookmore">
            <img src="http://competition.duoyu021.top/index/right3.png" alt="right">
            <div class="lookmoretit">
              <NuxtLink to="/404">查看更多</NuxtLink>
            </div>
          </div>
          <div class="dminA">
            <img src="http://competition.duoyu021.top/index/ten.png" alt="admin">
          </div>
        </div>
        <img class="scimg" src="http://competition.duoyu021.top/index/screen.png" alt="大屏">
        <div class="lala">
          <el-carousel :name="screen" :interval="1500" arrow="never" indicator-position="none">
            <el-carousel-item v-for="(item, i) in screenlist" :key="i">
              <div class="screenmask">
                <div class="sctit">{{ item.tit }}</div>
                <div class="sctext">
                  {{ item.text }}
                </div>
                <div class="scmore" @click="readmore(i)">Read More
                  <img src="http://competition.duoyu021.top/index/right2.png" alt="向右">
                </div>
              </div>
            </el-carousel-item>
          </el-carousel>
        </div>
      </div>

    </div>
    <div class="lookmore2">
      <img src="http://competition.duoyu021.top/index/right3.png" alt="right">
      <div class="lookmoretit">
        <NuxtLink to="/404">查看更多</NuxtLink>
      </div>
    </div>
  </div>
</template>

<script setup>

useHead({
  title: '首页'
})

const swiper = ref('swiper')
const screen = ref('screen')
const teladmin = ref('teladmin')

const tit1 = ref('123')

const router = useRouter()
const inputvalue = ref()

// const slideList = [
//   { url: 'http://competition.duoyu021.top/index/bgimg1.png' },
//   { url: 'http://competition.duoyu021.top/index/bgimg1.png' },
//   { url: 'http://competition.duoyu021.top/index/bgimg1.png' },
// ]

// const dminlist = [
//   {
//     url: 'http://competition.duoyu021.top/index/shuju.png',
//     tit: '开放式平台',
//     text: '富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本',
//     path: '/404'
//   },
//   {
//     url: 'http://competition.duoyu021.top/index/shuju.png',
//     tit: '开放式平台',
//     text: '富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富',
//     path: '/404'
//   },
//   {
//     url: 'http://competition.duoyu021.top/index/shuju.png',
//     tit: '开放式平台',
//     text: '富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富文本富',
//     path: '/404'
//   },
// ]

const tomore = (i) => {
  // console.log(dminlist[i].path)
  router.push(dminlist[i].path)
}

// const ventlist = ref([
//   {
//     url: 'http://competition.duoyu021.top/index/ventone.png',
//     tit: '古风舞蹈',
//     text: ' 活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍...',
//     num: '3696',
//   }, {
//     url: 'http://competition.duoyu021.top/index/venttwo.png',
//     tit: '星聚杯篮球',
//     text: ' 活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍...',
//     num: '4535',
//   }, {
//     url: 'http://competition.duoyu021.top/index/ventthree.png',
//     tit: '炫酷篮球',
//     text: ' 活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍活动报名介绍...',
//     num: '6213',
//   },
// ])

const screenlist = ref([
  {
    tit: '赛事大屏',
    text: '赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍',
    path: '/404'
  },
  {
    tit: '赛事大屏',
    text: '赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍赛事大屏介绍',
    path: '/404'
  }
])

const readmore = (i) => {
  router.push(screenlist.value[i].path)
}


const screenbox = ref(null)
let observer2 = null

const animatedBoxes = ref([])
let observer = null

onMounted(() => {
  observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('animate__animated', 'animate__lightSpeedInLeft')
      } else {
        entry.target.classList.remove('animate__animated', 'animate__lightSpeedInLeft')
      }
    })
  })

  animatedBoxes.value.forEach(box => observer.observe(box))

  observer2 = new IntersectionObserver((entries) => {
    if (entries[0].isIntersecting) {
      screenbox.value.classList.add('animate__animated', 'animate__fadeInDown')
    } else {
      screenbox.value.classList.remove('animate__animated', 'animate__fadeInDown')
    }
  })

  observer2.observe(screenbox.value)
})

onUnmounted(() => {
  if (observer2) {
    observer2.disconnect()
  } else if (observer) {
    observer.disconnect()
  }
})



// 接口

//获取轮播图
const { data } = await useAsyncData(() => {
  return getBanner({ nav_id: 1 });
}, {
  default: () => ({})
})
// console.log(data.value.data.data);
const slideList = data.value.data.data

//获取管理后台列表
const { data: dataadmin } = await useAsyncData(() => {
  return getAdminList({});
}, {
  default: () => ({})
})
// console.log(dataadmin.value.data.data);
const dminlist = dataadmin.value.data.data

//获取活动列表
const { data: datavent } = await useAsyncData(() => {
  return getActivityList({});
}, {
  default: () => ({})
})
// console.log(datavent.value.data.data);
const ventlist = datavent.value.data.data

//活动报名
const { data: dataapply } = await useAsyncData(() => {
  return postActivity({activity_id:2,name:'啊',mobile:'15106655709'});
}, {
  default: () => ({})
})
// console.log(dataapply);

//获取赛事大屏列表
const { data: datascreen } = await useAsyncData(() => {
  return getMatchScreen({});
}, {
  default: () => ({})
})
// console.log(datascreen.value.data.data);
// 接口


</script>

<style lang="scss" scoped>
//轮播图
:deep(.el-carousel__indicators--right) {
  left: 20px;
  width: 36px;
}

:deep(..el-carousel__indicators--vertical) {
  left: 20px;
  top: 70%;
  transform: translateY(-30%);
}

:deep(.el-carousel__button) {
  width: 14px;
  height: 50px;
}

.swiperbox {
  position: relative;
}

:deep(.el-carousel__container) {
  height: 800px;
}



.swiper {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

.swiper-mask {
  position: absolute;
  top: 54%;
  left: 20%;
  transform: translate(-50%, -50%);
  z-index: 999;
  color: #ffffff;
}

.sm-tit {
  font-size: 30px;
  font-weight: bold;
}

.sm-text {
  font-size: 20px;
  margin: 12px 0;
  font-weight: bold;
}

.sm-eng {
  font-size: 16px;
}

.sm-input {
  width: 320px;
  background-color: #ffffff;
  height: 50px;
  margin-top: 50px;
  display: flex;
  align-items: center;
  border-radius: 50px;
  padding: 0 6px;
  box-sizing: border-box;
}

.sm-inputson {
  width: 66%;
  height: 80%;
}

:deep(.el-input__wrapper) {
  border: none;
  box-shadow: none;
  background: none;
}

.sm-but {
  width: 34%;
  height: 80%;
  background-color: #f7ab73;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 14px;
}

//轮播图

//管理后台
.dminbox {
  width: 100%;
  margin-top: 40px;
  margin-bottom: 20px;
}

.dmin {
  width: 66%;
  margin: auto;
}

.dmintop {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

// .dmintop:nth-child(2) {
//   flex-direction: row-reverse;
// }

.lookmore {
  display: flex;
  cursor: pointer;

  & img {
    width: 20px;
    border-radius: 12px;
  }
}

.lookmoretit {
  color: #999999;
  font-weight: bold;
  margin-left: 10px;
}

.dminA {
  width: 300px;

  & img {
    transition: transform 0.5s ease-in-out;
  }
}

.dminA:hover img {
  transform: rotate(360deg);
}

.dmincent {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.dminson {
  width: 30%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  transition: box-shadow 0.3s;
}


.dminson img {
  transition: all 1.5s;
}

.dminson:hover img {
  transform: scale(1.1);
}

.dminson:hover {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
}

.dminson:hover .dminbot {
  background-color: #0b6cfe;
  color: #ffffff;

  & .dmintext {
    color: #ffffff;
  }
}

.dminson:hover .dminbut {
  border: solid 1px #f7ab73;
  color: #ffffff;
  background-color: #f7ab73;
}

.dminbot {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  background-color: #ffffff;
  padding-top: 10px;
}

.dmintit {
  margin: 10px;
  font-size: 25px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.dmintext {
  margin: 10px;
  font-size: 16px;
  color: #6e6e6e;
  //强制显示三行
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.butbox {
  width: 100%;
  display: flex;
  justify-content: flex-end;
}

.dminbut {
  margin: 10px;
  border: solid 1px #5cd297;
  padding: 3px 6px;
  box-sizing: border-box;
  border-radius: 6px;
  display: flex;
}

//管理后台
.teladmin {
  display: none;
}

//活动报名
.ventbox {
  width: 100%;
  margin-top: 80px;
  margin-bottom: 20px;
}

.vent {
  width: 66%;
  margin: auto;
}

.ventcent {
  width: 100%;
}

.ventitem {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 50px;
  overflow: hidden;
}

.ventitem:nth-child(2) {
  display: flex;
  flex-direction: row-reverse;
}

.ventitem img {
  width: 48%;
  aspect-ratio: 1.6;
  transition: all 1.5s;
}

.ventitem:hover img {
  transform: scale(1.1);
}

.vi-left {
  width: 48%;
  padding: 0 20px;
  padding-right: 40px;
  box-sizing: border-box;
}

.vl-top {
  position: relative;

  & img {
    position: absolute;
    width: 200px;
    top: 80%;
    left: 0%;
    transform: translate(0%, -50%);
  }
}
.line{
  height: 10px;
}

.vltit {
  font-size: 25px;
  margin-bottom: 20px;
  z-index: 99;
}


.vltext {
  line-height: 30px;
  //强制显示三行
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.okvent {
  display: flex;
  justify-content: space-between;
  margin: 20px 0;
}

.okleft {
  display: flex;

  & img {
    margin-right: 10px;
    width: 24px;
    height: 24px;
  }
}

.okright {
  & img {
    width: 100px;
    height: 30px;
  }
}

.ventbut {
  background-color: #f7ab73;
  padding: 10px 20px;
  box-sizing: border-box;
  border-radius: 6px;
  color: #ffffff;
  font-weight: bold;
  transition: background-position 0.3s ease-in-out;
  /* 添加过渡效果 */
  background-size: 200% 100%;
  background-image: linear-gradient(to right, #3498db 50%, #f39c12 50%);
}

.ventbut:hover {
  background-position: -100% 0;
  /* 移动背景图位置 */
}

//活动报名
//赛事大屏

.screenbox {
  width: 100%;
  margin-top: 80px;
  margin-bottom: 20px;
}

.screen {
  width: 66%;
  margin: auto;
  position: relative;
}

.scimg {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lala {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 200px;
  z-index: 999;
}

:deep(.el-carousel__container:last-child) {
  height: 200px;
}

.screenmask {
  width: 100%;
  height: 200px;
  background-color: rgba(11, 108, 254, 0.5);
  color: #ffffff;
  padding: 0 80px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.sctit {
  font-size: 24px;
  font-weight: bold;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.sctext {
  font-size: 16px;
  margin: 12px 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

.scmore {
  font-size: 14px;
  font-weight: bold;
  display: flex;
  align-items: center;
  cursor: pointer;

  & img {
    width: 20px;
    height: 15px;
    margin-left: 10px;
  }
}

.hotstit {
  display: none;
}

.lookmore2 {
  display: none;
}

//赛事大屏


/*
响应1500px
 */
@media screen and (max-width: 1500px) {
  :deep(.el-carousel__container) {
    height: 600px;
  }

  .swiper-mask {
    position: absolute;
    top: 54%;
    left: 26%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #ffffff;
  }

  .dmin {
    width: 80%;
  }

  .vent {
    width: 80%;
  }

  .screen {
    width: 80%;
  }
}

/*
响应1200px
 */
@media screen and (max-width: 1200px) {
  :deep(.el-carousel__container) {
    height: 420px;
  }

  .swiper-mask {
    position: absolute;
    top: 54%;
    left: 32%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #ffffff;
  }
}

/*
响应768px
 */
@media screen and (max-width: 768px) {
  .hotstit {
    display: block;
    position: relative;
    margin: auto;
    margin-bottom: 30px;
    text-align: center;
  }

  .tit-eng {
    font-size: 1.2rem;
    color: #e4e4e4;
    font-weight: bold;
  }

  .tit-p {
    color: #0b6cfe;
    font-weight: bold;
    font-size: 1.3rem;
    position: absolute;
    top: 90%;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  :deep(.el-carousel__indicators--right) {
    left: 20px;
    display: none;
  }

  :deep(.el-carousel__container) {
    height: 420px;
  }

  .swiper-mask {
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999;
    color: #ffffff;
  }

  .dmin {
    display: none;
  }

  .dmintop {
    display: none;
  }

  .lookmore2 {
    display: flex;
    justify-content: center;
    cursor: pointer;

    & img {
      width: 20px;
    }
  }

  .teladmin {
    display: block;
    width: 100%;
  }

  .adminimg {
    width: 100%;
    height: 240px;
    object-fit: cover;
  }

  .vent {
    width: 90%;
  }

  .ventbox {
    margin-top: 20px;
  }

  .ventitem {
    display: block;
    margin-bottom: 30px;

    & .apply {
      width: 100%;
    }
  }

  .ventitem:nth-child(2) {
    display: block;
  }

  .vi-left {
    width: 100%;
    padding: 0;
  }

  .screenbox {
    margin-top: 20px;
  }

  .screen {
    width: 90%;
  }

  .lala {
    height: 100px;
  }

  :deep(.el-carousel__container:nth-child(2)) {
    height: 100px;
  }

  .screenmask {
    height: 100px;
  }

  .sctit {
    font-size: 14px;
  }

  .sctext {
    font-size: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
  }

  .scmore {
    font-size: 10px;
  }
}
</style>
